import React, { useState, useRef } from 'react';
import { View, Text, Modal, TouchableOpacity, Alert } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import SignatureScreen from 'react-native-signature-canvas';

interface HandwrittenSignatureProps {
  visible: boolean;
  onClose: () => void;
  onSave: (signatureData: string) => void;
}

const HandwrittenSignature: React.FC<HandwrittenSignatureProps> = ({
  visible,
  onClose,
  onSave
}) => {
  // 创建签名画板引用
  const signatureRef = useRef<any>(null);
  
  // 处理签名完成
  const handleSignature = (signature: string) => {
    console.log('签名完成，数据长度:', signature ? signature.length : 0);
    if (signature && signature.length > 100) {
      onSave(signature);
    } else {
      Alert.alert('提示', '请先进行有效的签名');
    }
  };
  
  // 签名区域的HTML和CSS样式 - 横向布局
  const style = `
    body, html {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
    .m-signature-pad {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      position: relative;
      display: flex;
      flex-direction: row; /* 横向布局 */
    }
    .m-signature-pad--body {
      width: calc(100% - 120px); /* 减去按钮区域宽度 */
      height: 100%;
    }
    .m-signature-pad--footer {
      width: 120px;
      height: 100%;
      display: flex;
      flex-direction: column; /* 按钮纵向排列 */
      justify-content: center;
      background-color: rgba(255, 255, 255, 0.9);
      padding: 10px;
    }
    .save, .clear {
      font-size: 16px;
      padding: 15px 10px;
      margin: 10px 0;
      border-radius: 5px;
      border: none;
      color: white;
      font-weight: bold;
      text-transform: none;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
    .save {
      background-color: #3B82F6;
      margin-bottom: 20px;
    }
    .clear {
      background-color: #EF4444;
    }
    canvas {
      width: 100%;
      height: 100%;
    }
  `;
  
  return (
    <Modal
      visible={visible}
      transparent={false}
      animationType="slide"
      onRequestClose={onClose}
    >
      <View className="flex-1 bg-white">
        <View className="p-4 flex-row justify-between items-center border-b border-gray-200">
          <TouchableOpacity 
            onPress={onClose}
            className="p-2"
          >
            <Ionicons name="close" size={24} color="#6B7280" />
          </TouchableOpacity>
          <Text className="text-lg font-bold">手写签名</Text>
          <View className="w-10" />
        </View>
        
        <View className="flex-1 bg-gray-50">
          <SignatureScreen
            ref={signatureRef}
            onOK={handleSignature}
            onEmpty={() => Alert.alert('提示', '请先进行签名')}
            webStyle={style}
            descriptionText="在此处签名"
            clearText="清除"
            confirmText="保存"
            autoClear={false}
            imageType="image/png"
            backgroundColor="#F9FAFB"
            penColor="black"
            dotSize={2}
            minWidth={2}
            maxWidth={5}
            rotated={true}
          />
        </View>
        
        <View className="p-4 bg-white">
          <Text className="text-gray-500 text-center">请在上方区域手写您的签名</Text>
          <Text className="text-gray-500 text-center mb-2">横向签名更自然，点击右侧"保存"按钮完成</Text>
        </View>
      </View>
    </Modal>
  );
};

export default HandwrittenSignature; 